import './SetLadorFunc.scss'

import { Select } from 'antd'
import { useState } from 'react'

import { useEventEmitter } from 'ahooks'
import { FormTemplate } from '../../Utils/FormTemp'

import {
    modifyTableLadorRequest,
    modifyTableLadorFunction,
    modifyTableLadorModelBox,
    modifyTableLadorBatchBox,
    TableLadorTypeMapping
} from '../../Config/tableConfig'

const SetLadorFunc = ({ ModalEvent, data }) => {
    const { key, init } = data
    const [OptionsType, setOptionsType] = useState('request')

    const FormEvent = useEventEmitter()
    FormEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'Added') {
            ModalEvent.emit({ type: 'funcConfig', data: { key, func: data } })
        }
    })
    ModalEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'offLoading') FormEvent.emit({ type: 'offLoading' })
    })
    const RequestTemplate = () => {
        return (
            <div className='RequestTemplate'>
                <FormTemplate columns={modifyTableLadorRequest} init={init} ModalEvent={FormEvent} />
            </div>
        )
    }
    const FunctionTemplate = () => {
        return (
            <div>执行函数</div>
        )
    }
    const ModelBoxTemplate = () => {
        return (
            <div>内置弹窗</div>
        )
    }
    const BatchBoxTemplate = () => {
        return (
            <div>批量操作</div>
        )
    }


    return (
        <div className='SetLadorFunc'>
            <Select options={TableLadorTypeMapping} value={OptionsType} onChange={setOptionsType} />
            {(() => {
                switch (OptionsType) {
                    case 'request': return <RequestTemplate />
                    case 'function': return <FunctionTemplate />
                    case 'modelBox': return <ModelBoxTemplate />
                    case 'batchBox': return <BatchBoxTemplate />
                    default: break;
                }
            })()}
        </div>
    );
};

export default SetLadorFunc;